<!--  -->
<template>
  <div>
    <at-menu mode="horizontal" active-name="1">
      <at-menu-item name="1">
        <i class="icon icon-chevron-left" @click="mback"></i>填写会议报告
      </at-menu-item>
    </at-menu>
    <at-steps :current="current" style="margin-top:20px;width:100%;text-align:center">
      <at-step v-for="(step, index) in steps" :title="step.title" :key="index"></at-step>
    </at-steps>
    <div
      class="steps-content"
      v-if="current==0"
      style="margin-top: 16px; border: 1px solid #e9e9e9; border-radius: 6px;background-color: #fafafa; min-height: 200px; text-align: center; padding:20px;"
    >
      <el-form label-position="left" label-width="80px" :model="meeting">
        <el-form-item label="会议名称">
          <el-input v-model="meeting.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="会议地点">
          <el-input v-model="meeting.room.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="会议描述">
          <el-input
            v-model="meeting.desc"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-input v-model="meeting.startTime" disabled></el-input>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-input v-model="meeting.endTime" disabled></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div
      class="steps-content"
      v-if="current==1"
      style="margin-top: 16px; border: 1px solid #e9e9e9; border-radius: 6px;background-color: #fafafa; min-height: 200px; text-align: center; padding:20px;"
    >
      <el-row>
        <el-col :span="12">
          <el-input
            type="textarea"
            :autosize="{ minRows: 5, maxRows: 10}"
            placeholder="请添加会议步骤"
            v-model="addmeetingstep"
            style="width:300px"
          ></el-input>
          <div>
            <at-button type="primary" style="margin-top:10px" @click="addstep(addmeetingstep)">添加步骤</at-button>
            <at-button
              type="primary"
              style="margin-top:10px"
              @click="addmeetingstep='';meetingsteps=[]"
            >清空步骤</at-button>
          </div>
        </el-col>
        <el-col :span="10" style="text-align:center;margin-left:50px">
          <at-steps
            :current="stepcurrent"
            size="small"
            direction="vertical"
            v-if="meetingsteps.length!=0"
          >
            <at-step
              :title="`步骤${index+1}`"
              :description="item"
              v-for="(item,index) in meetingsteps"
              :key="index"
            ></at-step>
          </at-steps>
        </el-col>
      </el-row>
    </div>

    <div
      class="steps-content"
      v-if="current==2"
      style="margin-top: 16px; border: 1px solid #e9e9e9; border-radius: 6px;background-color: #fafafa; min-height: 200px; text-align: center; padding:20px;"
    >11</div>

    <div style="width:100%;text-align:center">
      <at-button type="primary" @click="prev" style="margin-top: 12px;">上一步</at-button>
      <at-button type="primary" @click="next" style="margin-top: 12px;">{{current==2?'提交':'下一步'}}</at-button>
    </div>
  </div>
</template>

<script>
import { back } from "../../assets/js/common";
export default {
  data() {
    return {
      current: 0,
      steps: [
        {
          title: "会议基本信息"
        },
        {
          title: "会议内容"
        }
      ],
      meeting: {},
      addmeetingstep: "",
      meetingsteps: [],
      stepcurrent: 0
    };
  },

  components: {},
  created() {
    this.meeting = this.$route.query.content;
  },
  computed: {},

  methods: {
    addstep(step) {
      this.meetingsteps.push(step);
      this.addmeetingstep = "";
      this.stepnext();
    },
    stepnext() {
      this.stepcurrent++;
    },
    mback() {
      back();
    },
    prev() {
      if (this.current-- <= 0) this.current = 0;
    },
    next() {
      if (this.current == 1) {
        this.$router.push({
          path: "/MeetingNote",
          query: {
            steps: this.meetingsteps,
            meeting: this.meeting
          }
        });
      }
      if (this.current++ >= 2) this.current = 2;
    }
  }
};
</script>
<style scoped>
div {
  text-align: left;
}
</style>